<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>点餐及配送后台管理系统</title>
  <link rel="stylesheet" href="/layui2.4/css/layui.css">
  <style type="text/css">
    /*左侧导航*/
    .layui-tree-skin-sidebar li i {
      color: rgba(255, 255, 255, .7);
      display: none;
    }

    .layui-tree-skin-sidebar li a cite {
      color: rgba(255, 255, 255, .7)
    }

    .layui-tree-skin-sidebar li .layui-tree-spread {
      display: block;
      position: absolute;
      right: 30px;
    }

    .layui-tree-skin-sidebar li {
      line-height: 45px;
      position: relative;
    }

    .layui-tree-skin-sidebar li ul {
      margin-left: 0;
      background: rgba(0, 0, 0, .3);
    }

    .layui-tree-skin-sidebar li ul a {
      padding-left: 20px;
    }

    .layui-tree-skin-sidebar li a {
      height: 45px;
      border-left: 5px solid transparent;
      box-sizing: border-box;
      width: 100%;
    }

    .layui-tree-skin-sidebar li a:hover {
      background: #4E5465;
      color: #fff;
      border-left: 5px solid #009688;
    }

    .layui-tree-skin-sidebar li a.active {
      background: #009688;
    }
  </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">后台管理系统</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href=""></a></li>
      <li class="layui-nav-item"><a href=""></a></li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item"><a href="/exit">退了</a></li>
    </ul>
  </div>

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <div id="sidemenubar" lay-filter="test"></div>
    </div>
  </div>

  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowClose="true">
      <ul class="layui-tab-title">
        <li class="layui-this">welcome</li>
      </ul>
      <div class="layui-tab-content" style="width:100%;height: 550px">
        <div class="layui-tab-item layui-show">欢迎使用</div>
      </div>

    </div>
  </div>

  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © layui.com - 底部固定区域
  </div>
</div>

<!--layui.js文件必须放到HTML内容的最后-->
<script src="/layui2.4/layui.js"></script>
<script src="/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
  $.ajax({
    type: 'get'
    , url: '/api/home'
    , async: false
    , dataType: 'json'
    , success: function (data) {
      const menuData = eval(data.data);
      start(toArray(menuData))
    }
  });

  function toArray(menuData) {
    const array = new Array();
    for (let i = 0; i < menuData.length; i++) {
      array.push(menuData[i]);
    }
    return array
  }

  function start(menuDate) {
    const menuData = menuDate;
    layui.use(['element', 'tree'], function () {
      const element = layui.element;
      const $ = layui.$;
      element.on('tab(demo)', function (data) {
      });
      console.log(menuData)
      layui.tree({
        elem: '#sidemenubar' //传入元素选择器
        , skin: 'sidebar'  //自定义tree样式的类名
        , nodes: menuData //节点数据
        , click: function (node, item) {
          //node即为当前点击的节点数据,item就是被点击的a标签对象了
          //导航按钮选中当前
          $('#sidemenubar a').removeClass('active');
          $(item).addClass('active');
          $(item).siblings('.layui-tree-spread').click();
          //添加新tab
          activeTab.init(node.name, node.url, node.id);
        }
      });

      const activeTab = {
        tabTit: '', //tab titile标题
        tabUrl: '', //tab内容嵌套iframe的src
        tabId: '', //tab 标签的lay-id
        tabCon: function () {
          let result;
          $.ajax({
            type: 'get',
            url: this.tabUrl,
            dataType: 'html',
            success: function (data) {
              result = data;
            }
          })
          return result;
        },
        addTab: function () { //新增tab项
          element.tabAdd('demo', {
            title: this.tabTit
            ,
            content: '<iframe frameborder="no" border="0" style="width:100%;height: 550px;" src = ' + this.tabUrl + ' ></iframe>' //支持传入html
            ,
            id: this.tabId
          })
        },
        changeTab: function () { //选中tab项
          element.tabChange('demo', this.tabId);
        },
        ishasTab: function () { //判断tab项中是否包含
          const _this = this;
          let dataId, isflag;
          const arrays = $('.layui-tab-title li');
          $.each(arrays, function (idx, ele) {
            dataId = $(ele).attr('lay-id');
            if (dataId == _this.tabId) {
              isflag = true
              return false
            } else {
              isflag = false
            }
          })
          return isflag
        },
        init: function (tabtit, taburl, tabid) {
          const _this = this;
          _this.tabUrl = taburl;
          _this.tabId = tabid;
          _this.tabTit = tabtit;
          if (taburl) {
            if (!_this.ishasTab()) {
              _this.addTab();
            }
            _this.changeTab();
          } else {
            return false
          }
        }
      }
    });
  }
</script>
</body>
</html>
